<script lang="ts" setup>
import { computed } from 'vue'
import { withBase } from 'vitepress'

const props = defineProps<{
    mode: 'enable' | 'disable' | 'half'
}>()

const srcImg = computed(() => {
    if(props.mode === 'enable') {
        return withBase('/svg/success.svg')
    }else if(props.mode === 'disable') {
        return withBase('/svg/fail.svg')
    }else if(props.mode === 'half') {
        return withBase('/svg/half.svg')
    }
})
</script>

<template>
    <div class="mode-icon">
        <img :src="srcImg" />
    </div>
</template>

<style scoped>
    .mode-icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mode-icon img {
        max-width: 24px;
    }
</style>